<template>
  <dl>
    <dt>{{ $t('pageOverview.serverInformation') }}</dt>
    <dd></dd>
    <dt>{{ $t('pageOverview.model') }}：</dt>
    <dd>{{ serverModel ? serverModel : '--' }}</dd>
    <dt>{{ $t('pageOverview.serialNumber') }}：</dt>
    <dd>{{ serverSerialNumber ? serverSerialNumber : '--' }}</dd>
  </dl>
</template>

<script setup lang="ts">
import { useSystemStore } from '@/store/SystemManagement/SystemInformation/SystemStore';

const systemStore = useSystemStore();

const server = computed(() => systemStore.systems[0]);
const serverModel = computed(() => server.value?.model);
const serverSerialNumber = computed(() => server.value?.serialNumber);

onMounted(() => {
  systemStore.getSystem();
});
</script>

<style scoped lang="scss">
dl > dt:first-child {
  font-weight: bold;
  font-size: 16px;
  padding-bottom: 20px;
}
dl {
  display: grid;
  grid-template-columns: auto 1fr;
  row-gap: 10px;
  column-gap: 10px;
}
</style>
